import React, { useState } from "react";

export default function FormCom() {
  // 1. 声明用户名的状态 
  let [user, setUser] = useState('');
  let [pass, setPass] = useState('');

  // 3. 声明 saveUser 函数
  let saveUser = (e) => {
    //更新 user 的状态
    setUser(e.target.value);
  }

  let savePass = e => {
    setPass(e.target.value);
  }

  return (
    <form>
      <h2>登录😊</h2>
      <hr />
      用户名:
      {/* 2. 设置 value 属性 */}
      <input type="text" value={user} onChange={saveUser} />
      <br></br>
      密码:
      <input
        type="password"
        value={pass}
        onChange={savePass}
      />
      <br />
      <hr />
      <button>登录</button>
      <button>重置</button>
    </form>
  );
}
